class Dep {

    constructor() {
      // this.id = i++;
      this.subs = []; // 存储的是与 当前 Dep 关联的 watcher
    }
  
    /** 添加一个 watcher */
    addSub( sub ) {
      this.subs.push(sub)
    }
    /** 移除 */
    removeSub( sub ) {
      for(let i = this.subs.length - 1; i >= 0; i--){
        if(sub === this.subs[i]){
          this.subs.splice(i,1)
        }
      }
    }
  
    /** 将当前 Dep 与当前的 watcher ( 暂时渲染 watcher ) 关联*/
    depend() {
      if(Dep.target){
        this.addSub(Dep.target)  //将当前watcher与当前dep相关联
        Dep.target.addDep(this)  //将当前dep与当前watcher向关联
      }
    }
    /** 触发与之关联的 watcher 的 update 方法, 起到更新的作用 */
    notify() {
      // 在真实的 Vue 中是依次触发 this.subs 中的deps中的 watcher 的 update 方法
      //此时不需要判断是否存在Dep.target，因为已经将watcher与deps关联起来了，deps中就存在watcher，这个watcher也是全局的watcher
      //只不过存储的位置不一样，与全局watcher中的数据相同
      
      let deps = this.subs.slice()
      deps.forEach(watcher => {
        watcher.update()
      })
      
    }
  
  }
  
  
  
  // 全局的容器存储渲染 Watcher
  // let globalWatcher
  // 学 Vue 的实现
  Dep.target = null; // 这就是全局的 Watcher

  let targetStack = []

  function pushTarget(target){
    targetStack.unshift(Dep.target)
    Dep.target = target
  }
  function popTarget(){
    targetStack.shift()
  }